<template>
  <el-dialog class="dialog" title="绑定产品" center="center" :visible.sync="show" :before-close="cancelBind">
    <div>
      <!--<el-form :inline="true" :model="filters" class="demo-form-inline" ref="searchForm">
        <el-form-item>
          <el-button type="primary" plain icon="fa fa-chain" @click="confirmBind" size="mini">
            批量绑定
          </el-button>
        </el-form-item>
        <el-form-item prop="attrType">
          <el-select size="mini" v-model="filters.attrType" clearable filterable>
            <el-option v-for="item in attrList" :label="item.name" :value="item.id" :key="item.id">

            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" icon="el-icon-search" type="primary" @click="onSearch">查询</el-button>
          <el-button size="mini" icon="el-icon-refresh-left" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>-->

      <el-button icon="el-icon-plus" type="success" plain size="medium" circle
                 @click="addRelation">
      </el-button>

    </div>
    <!-- 列表 -->
    <el-table ref="tableList" :data="dataList" :fit="true" highlight-current-row max-height="600"
               empty-text="对不起，没有找到相关数据！">
      <el-table-column label="操作" width="80" align="center">
        <template slot-scope="scope">
          <el-button icon="el-icon-minus" type="danger" plain size="medium" circle
                     @click="subRelation(scope.$index)">
          </el-button>
        </template>
      </el-table-column>
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column prop="relationName" align="center" width="180" label="归类名称">
        <template slot-scope="scope">
          <div>
            <el-input clearable v-model="scope.row.relationName"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="goodsCodes" align="center" width="400" label="关联产品编号">
        <template slot-scope="scope">
          <div>
            <el-input clearable v-model="scope.row.goodsCodes"></el-input>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序(正序)" align="center" width="100">
        <template slot-scope="scope">
          <div>
            <el-input clearable v-model="scope.row.sort"
                      @input="handleSortInput(scope.row, scope.$index)"></el-input>
          </div>
        </template>
      </el-table-column>

    </el-table>

    <div slot="footer">
      <el-button plain type="primary" @click="sureClick">保 存</el-button>
      <el-button plain @click="cancelBind">取 消</el-button>
    </div>

  </el-dialog>
</template>
<script>
  import GoodRelationApi from "@/api/goods/goodRelation"

  export default {
    props: {
      show: {
        type: Boolean,
        default: false,
      },
      idType: {
        type: Number
      },
      goodsIds:{
        type:Array,
        default: function (){
          return [];
        }
      },
      id: {
        type: Number | String
      },
    },
    watch: {
      show(val) {
        Object.assign(this.$data, this.$options.data());
        if (val&&!this.goodsIds.length) {
            this.listData()
          }

        }
    },
    data() {
      return {
        dataList: [],
      }
    },
    components: {},
    methods: {

      handleSortInput(row, index) {
        let reg = /^[1-9][0-9]{0,2}$/
        if (row.sort && !reg.test(row.sort)) {
          row.sort = "1"
          this.$message.error("排序只能输入为1-999")
        }
      },
      cancelBind() {
        this.$emit("cancel")
      },
      addRelation() {
        this.dataList.push({
          relationName:'',
          classifyId: this.idType==1?this.id:'',
          goodsId: this.idType==2?this.id:'',
          goodsCodes:'',
          sort:'',
        })
      },
      subRelation(index) {
        if (this.dataList) {
          this.dataList.splice(index, 1)
        }
      },
      listData() {
        // 获取列表数据
        let cond = {
          id: this.id,
          idType: this.idType
        }
        GoodRelationApi.listByParam(cond)
          .then(res => {
            this.dataList = res.data
            setTimeout(() => {
              this.$refs.tableList.doLayout()
            })
          }).catch(err => {
        })
      },
      async sureClick() {
        // 去掉空数据(relationName,goodsCodes) + goodsCodes中文逗号改成英文
        let list = this.dataList
        if (list.length > 0){
          list.forEach(item=>{
            let reg = /\s+/g
            let reg2 = /，/g
            item.relationName = item.relationName.replace(reg,"")
            item.goodsCodes = item.goodsCodes.replace(reg,"").replace(reg2,",")
          })
          list = list.filter(item=>{
            return item.relationName&&item.goodsCodes
          })
        }
        await this.$confirm("确定绑定","提示",{})
        let param = {
          relationList: list
        }
        let idType = this.idType
        if(this.goodsIds.length > 0){
          param.goodsIds = this.goodsIds
        }else if (idType == 1) {
          param.classifyId = this.id
        } else if (idType == 2) {
          param.goodsId = this.id
        }
        GoodRelationApi.bandRelation(param).then(res => {
          this.$Utils.notifySuccess()
          this.cancelBind()
        })
      },

    }
  }
</script>

<style lang="scss" scoped>
  .dialog {
    &::v-deep .el-dialog {
      width: max-content;
    }

    .el-radio-group {
      margin-left: 10px;

      .el-radio {
        margin-right: 20px;
      }
    }

    .img-wrapper {
      width: 80px;
      height: 60px;
      overflow: hidden;
      border-radius: 3px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 0 auto;

      .el-image {
        width: 100%;

        &::v-deep img {
          width: 100%;
          height: auto;
        }
      }
    }
  }
</style>

